<template>
 <div>
    <input type="file" class="inputfile" ref='file' @change='uploadfile'>
    <img @click="startupload" class="avatar" :src="userInfo.avatar?userInfo.avatar.replace(/public/,$host):require('@/assets/images/header.png')" alt="">
</div>

</template>

<script>
import{mapState,mapMutations} from 'vuex';
export default {
     computed:{
    ...mapState(['userInfo'])
  },
  methods:{
      ...mapMutations(['setUserInfo']),
      startupload(){
          this.$refs.file.click()
      },
      uploadfile(){
        //   console.log(666)
        var file =this.$refs.file.files[0];
        var data = new FormData();
        data.append('file',file);
        console.log(file);

        this.$ajax.uploadavatar(data).then(res=>{
            if(res.code==200){
                this.setUserInfo({avatar:res.avatar.replace(/public/,this.$host)})
            }
        })
      }
  },
    
}
</script>

<style lang="scss" scoped>
.inputfile{
    display: none;
}
.avatar{
    margin-top: 24px;
    width: 60px;
    height: 60px;
    border-radius:50% ;
}
</style>